<template>
  <div class="singer-list">
    <van-sticky>
      <div class="singer-header">
        <div class="singer-info">
          <div class="info-l">
            <img v-lazy="picUrl" alt="" />
          </div>
          <div class="info-r">
            <div class="s-name">
              <span>{{ name }}</span>
              <span>{{ alias }}</span>
            </div>
            <div class="s-icon">
              <span>
                <svg
                  t="1639130481418" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7682" width="200" height="200"><path d="M856.8 82.8H386.1c-40.4-43.2-135.5-67-188.9-67-94.9 0-175.8 70.5-188.9 164.4-5.6 16-8.3 31.3-8.3 46.7v603.7c0 98.7 80.3 179.2 179.2 179.2h695.7c82 0 148.8-66.7 148.8-148.8V249.8c0-92.2-74.8-167-166.9-167z m0 30.4c60 0 110.5 39.2 128.7 93.2H627.2l-183.5-93.2h413.1z m136.6 747.7c0 65.3-53.1 118.4-118.4 118.4H179.3c-82 0.1-148.9-66.7-148.9-148.8V226.8c0-12.3 2.3-24.7 7-38l0.8-3.2c10.5-79.4 78.7-139.5 159.1-139.5 56.2 0 142.9 26.7 170.1 61.2l4.6 5.8h2.6l242.3 120.3h374.9c0.6 5.3 1.6 10.6 1.6 16.1v611.4z m0 0" fill="" p-id="7683" ></path>
                  <path d="M201.3 842.6h791v27.8h-791v-27.8z m-92.9 0h30.3v30.3h-30.3v-30.3z m258-260L346.1 693.8c-1.9 10.7 2.3 21.3 11 27.8 8.8 6.5 20.1 7.4 29.8 2.5l98.7-51.6 99.5 53.6c4.3 2.3 8.9 3.4 13.5 3.4 5.7 0 11.5-1.8 16.4-5.3 8.8-6.3 13.3-16.8 11.6-27.6L608.1 586.8l81.8-78c7.8-7.5 10.7-18.6 7.5-29-3.3-10.4-12-17.8-22.7-19.5L564.5 444l-49-101.9c-4.7-9.8-14.4-15.9-25.2-16.1-9.7-0.5-20.7 5.8-25.6 15.5L415.1 441.1l-112 15.1c-10.7 1.5-19.6 8.8-23.1 19.1s-0.8 21.4 6.9 29.1l79.5 78.2z m52.8-111.3c9.2-1.2 17.2-6.9 21.5-15.3l49.2-97.2 47.2 98.3c4.1 8.4 12 14.3 21.2 15.7L666.1 489.6l-78.8 75.2c-6.7 6.4-9.9 15.7-8.4 25l18.5 108.3-97.3-52.3c-4.2-2.3-8.8-3.4-13.4-3.4-4.4 0-8.9 1-13 3.1l-97 49.7 19.6-107.3c1.7-9.2-1.3-18.6-7.9-25.1l-77.3-77 108.1-14.5z m0 0" fill="" p-id="7684" ></path>
                </svg>
              </span>
              <span class="collection">收藏</span>
            </div>
            <div class="s-desc">
              <span>单曲数:{{ musicSize }}</span>
              <span>专辑数:{{ albumSize }}</span>
              <span>MV数:{{ mvSize }}</span>
            </div>
          </div>
        </div>
        <div class="info-back" @click="goBack">
          <span>
            <svg t="1639389382045" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2306" width="200" height="200"><path d="M872.802928 755.99406 872.864326 755.99406 872.864326 755.624646Z" p-id="2307"></path><path d="M927.846568 511.997953c0-229.315756-186.567139-415.839917-415.838893-415.839917-229.329059 0-415.85322 186.524161-415.85322 415.839917 0 229.300406 186.524161 415.84094 415.85322 415.84094C741.278405 927.838893 927.846568 741.29836 927.846568 511.997953M512.007675 868.171955c-196.375529 0-356.172979-159.827125-356.172979-356.174002 0-196.374506 159.797449-356.157629 356.172979-356.157629 196.34483 0 356.144326 159.783123 356.144326 356.157629C868.152001 708.34483 708.352505 868.171955 512.007675 868.171955" p-id="2308"></path><path d="M682.378947 642.227993 553.797453 513.264806 682.261267 386.229528c11.661597-11.514241 11.749602-30.332842 0.234337-41.995463-11.514241-11.676947-30.362518-11.765975-42.026162-0.222057L511.888971 471.195665 385.223107 344.130711c-11.602246-11.603269-30.393217-11.661597-42.025139-0.059352-11.603269 11.618619-11.603269 30.407544-0.059352 42.011836l126.518508 126.887922L342.137823 639.104863c-11.662621 11.543917-11.780301 30.305213-0.23536 41.96988 5.830799 5.89015 13.429871 8.833179 21.086248 8.833179 7.53972 0 15.136745-2.8847 20.910239-8.569166l127.695311-126.311801L640.293433 684.195827c5.802146 5.8001 13.428847 8.717546 21.056572 8.717546 7.599072 0 15.165398-2.917446 20.968567-8.659217C693.922864 672.681586 693.950494 653.889591 682.378947 642.227993" p-id="2309"></path></svg>
          </span>
        </div>
      </div>
    </van-sticky>
    

    <div class="content">
      <div class="s-info-tab">
        <van-tabs v-model="active">
          <van-tab v-if="tag==1" title="热门歌曲">
            <div
              class="hot-song"
              v-for="(item, index) in hotSong"
              :key="index"
              :class="{ on: index % 2 == 0 }"
              @click="itemClick(item, index)"
            >
              <div class="hot-l">
                <div class="song-num">{{ matchNum(index + 1) }}</div>
                <div class="song-name">
                  <span>{{ item.name }}</span>
                </div>
              </div>
              <div class="hot-r">
                <div class="song-albumName">
                  <span>{{ item.al.name }}</span>
                </div>
              </div>
            </div>
            <div class="seeAll" @click="seeAll"><span>查看全部 ></span></div>
          </van-tab>
          <van-tab v-else title="全部歌曲">
            <div
              class="hot-song"
              v-for="(item, index) in hotSong"
              :key="index"
              :class="{ on: index % 2 == 0 }"
              @click="itemClick(item, index)"
            >
              <div class="hot-l">
                <div class="song-num">{{ matchNum(index + 1) }}</div>
                <div class="song-name">
                  <span>{{ item.name }}</span>
                </div>
              </div>
              <div class="hot-r">
                <div class="song-albumName">
                  <span>{{ item.al.name }}</span>
                </div>
              </div>
            </div>

            <div class="pagination">
              <van-pagination v-model="currentPage" 
                :total-items="totalSongs" 
                :show-page-size="6" 
                :items-per-page="20" force-ellipses
                @change="pageChange">
                <template #prev-text>
                  <van-icon name="arrow-left" />
                </template>
                <template #next-text>
                  <van-icon name="arrow" />
                </template>
              </van-pagination>
            </div>
            <!-- <div class="seeAll" @click="seeAll"><span>查看全部 ></span></div> -->
          </van-tab>
          <van-tab title="所有专辑">
            <div class="album-header">
              <span class="icon-complete" @click="changeIcon">
                <svg
                  t="1639365961974"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4003"
                  width="200"
                  height="200"
                >
                  <path
                    d="M64 192h256v288H64zM64 544h256v288H64zM384 192h256v288H384zM384 544h256v288H384zM704 192h256v288H704zM704 544h256v288H704z"
                    p-id="4004"
                  ></path>
                </svg>
              </span>
              <span class="list-complete" @click="changeList">
                <svg
                  t="1639365867551"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3090"
                  width="200"
                  height="200"
                >
                  <path
                    d="M149.461333 576h213.077334c11.861333 0 21.461333 9.6 21.461333 21.461333v213.077334C384 822.4 374.4 832 362.538667 832H149.461333C137.6 832 128 822.4 128 810.538667v-213.077334C128 585.6 137.6 576 149.461333 576zM85.333333 810.538667A64.106667 64.106667 0 0 0 149.461333 874.666667h213.077334A64.106667 64.106667 0 0 0 426.666667 810.538667v-213.077334A64.106667 64.106667 0 0 0 362.538667 533.333333H149.461333A64.106667 64.106667 0 0 0 85.333333 597.461333v213.077334z m0-384A64.106667 64.106667 0 0 0 149.461333 490.666667h213.077334A64.106667 64.106667 0 0 0 426.666667 426.538667v-213.077334A64.106667 64.106667 0 0 0 362.538667 149.333333H149.461333A64.106667 64.106667 0 0 0 85.333333 213.461333v213.077334zM149.461333 192h213.077334C374.4 192 384 201.6 384 213.461333v213.077334C384 438.4 374.4 448 362.538667 448H149.461333C137.6 448 128 438.4 128 426.538667v-213.077334C128 201.6 137.6 192 149.461333 192z m768.042667 64a21.333333 21.333333 0 0 0 0-42.666667h-426.666667a21.333333 21.333333 0 1 0 0 42.666667h426.666667z m0 384a21.333333 21.333333 0 0 0 0-42.666667h-426.666667a21.333333 21.333333 0 1 0 0 42.666667h426.666667z m0-213.333333a21.333333 21.333333 0 0 0 0-42.666667h-426.666667a21.333333 21.333333 0 1 0 0 42.666667h426.666667z m0 384a21.333333 21.333333 0 0 0 0-42.666667h-426.666667a21.333333 21.333333 0 1 0 0 42.666667h426.666667z"
                    fill="#3D3D3D"
                    p-id="3091"
                  ></path>
                </svg>
              </span>
              
            </div>
            <div v-if="Tag == 1">
              <album-list :data="hotAlbum"></album-list>
            </div>
            <div v-if="Tag == 2">
              <div class="list-album" 
                v-for="(item,index) in hotAlbum" 
                :key="index" 
                @click="albumClick(item,index)">
                <div class="album-img">
                  <img v-lazy="item.picUrl" alt="">
                </div>

                <div class="album-info">
                  <span>{{ item.name }}</span>
                  <span>{{ item.publishTime | formatDate }}</span>
                </div>
              </div>
              <!-- <music-list :data="hotAlbum" :titleFlag="false"></music-list> -->
            </div>
          </van-tab>
          <van-tab title="相关MV">
            <music-list :data="hotMV" :titleFlag="false"></music-list>
          </van-tab>
          <van-tab title="个人介绍">
            <div class="personal">
              <div class="p-desc">
                <h3 class="title">{{ name }}简介</h3>
                <span>{{ briefDesc }}</span>
              </div>
              <div class="p-works">
                <h3 class="title">{{ descTitle }}</h3>
                <span v-html="formatWord(descTxt)"></span>
              </div>
              <div class="p-works">
                <h3 class="title">{{ milepostTitle }}</h3>
                <span v-html="formatWord(milepostTxt)"></span>
              </div>
            </div>
          </van-tab>
          <van-tab title="相似歌手">
            <similar-singer :data="artistsList"></similar-singer>
          </van-tab>
        </van-tabs>
      </div>
    </div>

    <!-- <van-popup v-model="songshow" position="right" :style="{ height: '100%',width: '100%' }">
      <div class="song-header">
        <span><——</span>
        <span>全部歌曲</span>
      </div>

    </van-popup> -->
  </div>
</template>

<script>
import { getHotSong, getSingerAlbum, getSingerMv, getSinegrDesc, getSimilarSinger, getAllSongs } from "../../api/singer";
import { formatDate } from '../../common/js/formatDate'

import MusicList from "../../components/Music-List/music-list.vue";
import AlbumList from "../../components/Album-List/album-list.vue"
import SimilarSinger from './cpns/similar-sinegr.vue'

export default {
  components: {
    MusicList,
    SimilarSinger,
    AlbumList,
  },

  data() {
    return {
      singerInfo: [],
      picUrl: "",
      name: "",
      alias: "",
      musicSize: "",
      albumSize: "",
      mvSize: "",
      active: 0,
      tag:1,
      totalSongs:50,
      currentPage:1,
      offset:0,
      limit:100,
      hotSong: [],
      Tag: 1,
      hotAlbum: [],
      hotMV:[],
      briefDesc:'',
      descTitle:'',
      descTxt:'',
      milepostTitle:'',
      milepostTxt:'',
      artistsList:[],
      songshow:false,
    };
  },

  created() {
    this._getHotSong(this.$route.params.id);
    this._getSingerAlbum(this.$route.params.id);
    this._getSingerMv(this.$route.params.id);
    this._getSingerDesc(this.$route.params.id);
    this._getSimilarSinger(this.$route.params.id);
  },

  methods: {
    _getHotSong(id) {
      getHotSong(id).then((res) => {
        // console.log(res.hotSongs);
        this.picUrl = res.artist.picUrl;
        this.name = res.artist.name;
        this.alias = res.artist.alias[0];
        this.musicSize = res.artist.musicSize;
        this.albumSize = res.artist.albumSize;
        this.mvSize = res.artist.mvSize;

        // 热门歌曲
        this.hotSong = res.hotSongs;
      });
    },

    _getSingerAlbum(id) {
      getSingerAlbum(id).then((res) => {
        // console.log(res);
        this.hotAlbum = res.hotAlbums;
      });
    },

    _getSingerMv(id){
      getSingerMv(id).then((res) => {
        // console.log(res);
        this.hotMV = res.mvs;
      })
    },

    _getSingerDesc(id){
      getSinegrDesc(id).then((res) => {
        // console.log(res);
        this.briefDesc = res.briefDesc;
        if(res.introduction.length !== 0){
          this.descTitle = res.introduction[0].ti
          this.descTxt = res.introduction[0].txt
          this.milepostTitle = res.introduction[1].ti
          this.milepostTxt = res.introduction[1].txt
        }
      })
    },

    _getSimilarSinger(id){
      getSimilarSinger(id).then((res) => {
        // console.log(res);
        this.artistsList = res.artists;
      })
    },

    _getAllSongs(id){
      let params = {
        id,
        limit:this.limit,
        offset:this.offset
      }
      getAllSongs(params).then((res) => {
        console.log(res);
        this.hotSong = res.songs;
        this.totalSongs = res.total;
      })
    },

    matchNum(Num) {
      if (Num < 10) {
        return "0" + Num;
      } else {
        return Num;
      }
    },

    changeIcon(){
      this.Tag = 1;
    },

    changeList(){
      this.Tag = 2;
    },

    goBack(){
      this.$router.back();
    },

    itemClick(item, index) {
      this.$router.push({ path: "/player/" + item.id });
    },

    albumClick(item,index){
      this.$router.push({path: '/album/' + item.id});
    },

    seeAll(){
      this.tag = 2;
      
      this._getAllSongs(this.$route.params.id);
      // this.songshow = true;
    },

    pageChange(val){
      console.log(val);
      this.offset = (val - 1)*this.limit
      let params = {
        id:this.$route.params.id,
        offset:this.offset,
        limit:this.limit
      }
      getAllSongs(params).then((res) => {
        console.log(res);
        this.hotSong = res.songs;
      })
    },
    
    formatWord(val) {
      return val.replace(/\n/g, '<br>')
    },
  },

  filters: {
    formatDate(time) {
      let date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd')
    }
  }
};
</script>

<style scoped>
.singer-header{
  display: flex;
  background: #fafafa;
}

.singer-info {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.info-l img {
  width: 150px;
  height: 150px;
  padding-right: 15px;
}

.s-name {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.s-name span:first-child {
  font-weight: 700;
  font-size: 18px;
}

.s-name span:nth-child(2) {
  font-size: 13px;
}

.s-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid;
  border-radius: 50px;
  width: 40%;
}

.s-icon svg {
  padding-top: 5px;
  padding-left: 10px;
  font-size: 15px;
}

.s-icon .collection {
  padding-right: 10px;
  font-size: 13px;
}

.s-desc {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 13px;
  padding: 10px;
}

.content{
  padding-bottom: 50px;
}

/* 热门歌曲部分 */
.hot-song {
  display: flex;
  /* justify-content: space-between; */
  flex-direction: row;
  font-size: 13px;
  padding: 10px;
}

.hot-l {
  display: flex;
  width: 50%;
}

.song-num {
  margin-right: 20px;
}

.hot-r {
  margin-left: 10px;
}

.on {
  background: rgb(239, 239, 239);
}

.seeAll{
  margin: 5px 10px;
  font-size: 14px;
  margin-bottom: 20px;
}

.album-header{
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}

.list-complete{
  margin-left: 20px;
}

.list-album{
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.album-img img{
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.album-info{
  display: flex;
  flex-direction: column;
}

.album-info span:first-child{
  font-weight: 600;
}

.album-info span:last-child{
  font-size: 13px;
}

.p-desc,
.p-works{
  background-color: #ffffff;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin: 10px;
  padding: 10px;
}

.p-desc span{
  font-size: 12px;
  display:block;
  text-indent:2em;
}
.p-works span{
  font-size: 12px;
}
</style>